<template>
  <div>
    <h1 @click="query">JQ</h1>
    <P>一段文字1</P>
    <P>一段文字2</P>
    <P>一段文字3</P>
  </div>
</template>

<script setup>
class jQuery {
  constructor(selector) {
    const result = document.querySelectorAll(selector)
    const length = result.length
    for (let i = 0; i < length; i++) {
      this[i] = result[i]
    }
    this.length = length
    this.selector = selector
  }
  get(index) {
    return this[index]
  }
  each(fn) {
    for (let i = 0; i < this.length; i++) {
      const element = this[i]
      fn(element)
    }
  }
  on(type, fn) {
    return this.each(item => {
      item.addEventListener(type, fn, false)
    })
  }
}

// 插件
jQuery.prototype.dialog = content => {
  alert(content)
}

// 造轮子
class myJQuery extends jQuery {
  constructor(selector) {
    super(selector)
  }
  eat() {}
}

const query = () => {
  const p = new jQuery('p')
  p.each(item => {
    console.log(item, 'item')
  })
}
setTimeout(() => {
  const p = new jQuery('p')
  p.dialog('456')
  //   p.on('click', item => alert(item))
}, 0)
</script>

<style lang="scss" scoped></style>
